<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
	<title>task5</title>
	<style type="text/css">
	body{
		margin: 0px;
		min-width: 1000px;
	}
	.container{
		background-color: rgba(0, 0, 0, 0.17);
	}
	.container1{
		width: 95%;
		margin: 0 auto;
		position: relative;
	}
	.main{
		margin-right: 467px;
	}
	#navigation{
		width: 100%;
		height: 60px;
		background-color: rgba(41, 36, 33, 0.8);
		position: relative;
	}
	#img1{
		width: 50px;
		height: 30px;
		margin-left: 10px;
		margin-top: 15px;
	}
	#navigation .link{
		width: 47%;
		height: 30px;
		position: absolute;
		top: 29%;
		right: 5%;
	}
	#navigation ul{
		margin: 0;
	}
	#navigation li{
		float: left;
		margin-right: 26px;
	}
	#navigation a{
		text-decoration: none;
		color: white;

	}
	.first {
		border-right: 7px ridge;
		border-bottom: 7px ridge;
		width: 93%;
		height:580px;
		margin: 10px auto;
		background-color: white;
		padding: 30px 20px;

	}
	#fish{
		width: 247px;
		height: 171px;
	}
	h1{
		font-family: Georgia;
		font-size: 27px;
		font-weight: 900;
	}
	h2{
		font-size: 20px;
		font-weight: 600;
		margin-bottom: 10px;
        color: rgba(0, 0, 0, 0.52);
	}
	h3{
		font-size: 13px;
		font-weight: 600;
		color: rgba(25, 23, 23, 0.44);
	}
	.second{
		border-right: 7px ridge;
		border-bottom: 7px ridge;
		width: 93%;
		height:580px;
		margin: 10px auto;
		background-color: white;
		padding: 30px 20px;
	}
	.second ul{
		list-style: none;
	}
	.third {
		border-right: 7px ridge;
		border-bottom: 7px ridge;
		width: 93%;
		height:1500px;
		margin: 10px auto;
		background-color: white;
		padding: 30px 20px;

	}
	.third .pic{
		width: 90%;
		height: 80%;
		margin: 0 auto;
	}
	.third ol{
		width: 280px;
		height: 250px;
		border: 1px solid;
		border-color: rgba(0, 0, 0, 0.27);
		float: left;
		padding-left: 0px;
		margin-right: 25px;
	}
	.third ol p{
		text-align: center;
	}
	.third ol img{
		margin: 0 auto;
		display: block;
	}
	.forth{
		border-right: 7px ridge;
		border-bottom: 7px ridge;
		width: 93%;
		height:400px;
		margin: 10px auto;
		background-color: white;
		padding: 30px 20px;
	}
	.forth{
		font-family: -webkit-pictograph;
	}
	.forth #tableabove{
		margin-bottom: 1px;
		font-family: Georgia;
		font-weight: 700;
	}
	.forth table{
		width: 100%;
		color: #333333;
		border-width: 1px;
		border-color: rgba(0, 0, 0, 0.18);
		border-collapse: collapse;
		margin-bottom: 20px;

	}
	.forth table th{
		background-color: rgba(38, 38, 41, 0.92);
	}
	.forth table #tr6{
		background-color: rgba(27, 26, 25, 0.32);
		color: black;
		font-weight: 900;
	}
	.forth #tr1{
		color: white;
		text-align: left;
	}
	.forth td, th{
		padding-left: 8px;
	}
	.fifth{
		border-right: 7px ridge;
		border-bottom: 7px ridge;
		width: 400px;
		height:580px;
		background-color: white;
		padding: 30px 20px;
		position: absolute;
		top: 0px;
		right: 0px;

	}
	.fifth #register{
		margin: 0 auto;

	}
	.fifth table{
		margin:auto;
		width: 95%;
	}
	.fifth .tdleft{
		text-align: right;
		padding-right: 10px;
	}
	.fifth tr{
		height: 35px;
	}
	.fifth .hint{
		font-family: monospace;
		color: rgba(0, 0, 0, 0.49);
	}
	.fifth #description{
		padding-bottom: 80px;
	}
	.fifth textarea{
		width: 99%;
		height: 100px;
		font-size: 20px;
	}
	.fifth #button{
		width: 98%;
		margin: 10px auto;	
	}
	.fifth #button input{
		background-color: rgba(0, 0, 255, 0.49);
		color: white;
		height: 42px;
		border-radius: 8px;
	}
	.fifth .header{
		width: 80%;
		height: 50px;
		position: relative;
	}
	.fifth .header .line{
		width: 5px;
		height: 40px;
		background-color: rgba(0, 0, 0, 0.17);
		position: absolute;
		top: 1px;
	}
	.fifth h2{
		position: absolute;
		top: 0px;
		left: 10px;
		font-size: 15px;
	}
	.footer{
		width: 100%;
		height: 70px;
		background-color: black;
		color: white;
		text-align: center;
		line-height: 4;
	}


	
	</style>
</head>
<body>
	<div class="container">
			<div id="navigation">
				<img src="E:\前端学习\BaiduWeb\Baidu.jpg" id="img1">
				<div class="link">
					<ul>
						<li><a href="">导航链接一</a></li>
						<li><a href="">导航链接二</a></li>
						<li><a href="">导航链接三</a></li>	
						<li><a href="">导航链接四</a></li>
					</ul>
				</div>	
			</div>

		<div class="container1">
		<div class="main">
		<div class="first">
			        <hgroup>
					  <h1>文章一级标题</h1>
					  <h2>文章二级标题</h2>
					</hgroup>
					<h3>文章作者&nbsp文章发表时间</h3>
					<p style="text-indent: 2em">这是一段很长的段落，这是一段很长的段落，这是一段很长的段落，这是一段很长的段落，这是一段很长的段落，这是一段很长的段落，这是一段很长的段落，这是一段很长的段落，这是一段很长的段落,，这是一段很长的段落，这是一段很长的段落，这是一段很长的段落，这是一段很长的段落，这是一段很长的段落
					换行了<br/>
					这是一段很长的段落，这是一段很长的段落，这是一段很长的段落，这是一段很长的段落，这是一段很长的段落，这是一段很长的段落，这是一段很长的段落,这是一段很长的段落，这是一段很长的段落，这是一段很长的段落，这是一段很长的段落<a href="http://ife.baidu.com">这里有一个链接</a>这是一个很长很长的段落，<strong>这里有个粗体字</strong>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落</p>
					<img src="E:\前端学习\BaiduWeb\task1.jpg" id="fish">
					<p style="text-indent: 2em">这是一段很长的段落，这是一段很长的段落
					换行了<br/>
					这是一段很长的段落，这是一段很长的段落,这是一段很长的段落，这是一段很长的段落，<a href="http://ife.baidu.com">这里有一个链接</a>这是一个很长很长的段落，<strong>这里有个粗体字</strong>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落</p>
		</div> <!-- first -->
		<div class="second">
			        <hgroup>
					  <h1>另一篇文章一级标题</h1>
					  <h2>文章二级标题</h2>
					</hgroup>
					<h3>文章作者&nbsp文章发表时间</h3>
					<p style="text-indent: 2em">这是一段很长的段落，这是一段很长的段落，这是一段很长的段落，这是一段很长的段落，这是一段很长的段落，这是一段很长的段落，这是一段很长的段落，这是一段很长的段落，这是一段很长的段落,，这是一段很长的段落，这是一段很长的段落，这是一段很长的段落，这是一段很长的段落，这是一段很长的段落
					换行了<br/>
					这是一段很长的段落，这是一段很长的段落，这是一段很长的段落，这是一段很长的段落，这是一段很长的段落，这是一段很长的段落，这是一段很长的段落,这是一段很长的段落，这是一段很长的段落，这是一段很长的段落，这是一段很长的段落<a href="http://ife.baidu.com">这里有一个链接</a>这是一个很长很长的段落，<strong>这里有个粗体字</strong>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落</p>
					<img src="E:\前端学习\BaiduWeb\task1.jpg" id="fish">
					<ul>
						<li>列表项目一</li>
						<li>列表项目二</li>
						<li>列表项目三</li>
					</ul>
		</div> <!-- second -->
		<div class="third">
			<h1>图片</h1>
			<div class="pic">
				<ol style="margin-bottom: 20px">
					<p>好看的图片</p>
					<img src="E:\前端学习\BaiduWeb\task1.jpg" id="fish">
				</ol>
				<ol style="margin-bottom: 20px">
					<p>好看的图片</p>
					<img src="E:\前端学习\BaiduWeb\task1.jpg" id="fish">
				</ol>
				<ol style="margin-bottom: 20px">
					<p>好看的图片</p>
					<img src="E:\前端学习\BaiduWeb\task1.jpg" id="fish">
				</ol>
				<ol style="margin-bottom: 20px">
					<p>好看的图片</p>
					<img src="E:\前端学习\BaiduWeb\task1.jpg" id="fish">
				</ol>
				<ol style="margin-bottom: 20px">
					<p>好看的图片</p>
					<img src="E:\前端学习\BaiduWeb\task1.jpg" id="fish">
				</ol>
				<ol style="margin-bottom: 20px">
					<p>好看的图片</p>
					<img src="E:\前端学习\BaiduWeb\task1.jpg" id="fish">
				</ol>
				<ol style="margin-bottom: 20px">
					<p>好看的图片</p>
					<img src="E:\前端学习\BaiduWeb\task1.jpg" id="fish">
				</ol>
			</div>
		</div> <!-- third -->
		<div class="forth">
			        <hgroup>
					  <h1>最后一篇文章一级标题</h1>
					  <h2>文章二级标题</h2>
					</hgroup>
					<h3>文章作者&nbsp文章发表时间</h3>
					<ol>
						<li>排名1</li>
						<li>排名2</li>
						<li>排名3</li>
					</ol>
					<p id="tableabove">下面是一个表格，给表格加上一个border=“1”好让你看出是一个表格</p>
					<table border="1">
						<tr id="tr1">
							<th>表头</th>
							<th>表头</th>
							<th>表头</th>
						</tr>
						<tr>
							<td>表内容单元格</td>
							<td>表内容单元格</td>
							<td><a href="">操作</a></td>
						</tr>
						<tr>
							<td>表内容单元格</td>
							<td>表内容单元格</td>
							<td><a href="">操作</a></td>
						</tr>
						<tr>
							<td>表内容单元格</td>
							<td>表内容单元格</td>
							<td><a href="">操作</a></td>
						</tr>
						<tr>
							<td>表内容单元格</td>
							<td>表内容单元格</td>
							<td><a href="">操作</a></td>
						</tr>
						<tr id="tr6">
							<td>总计</td>
							<td colspan="2">1000</td>
						</tr>

					</table>
		</div> <!-- forth -->
		</div><!-- main -->

		<div class="fifth">
			<div class="header">
				<div class="line"></div>
				<h2>这里以后是一个侧栏，这是侧栏的标题</h2>
			</div>
			<form>
			    <div class="register">
			    <table>
			    	<tr>
					    <td class="tdleft">请输入邮箱地址</td>
					    <td><input type="text" name="input" value="这是一个文本输入框"></input>
					    </td>
					</tr>
					<tr>
						<td></td>
						<td class="hint">邮箱地址请按要求格式输入</td>
					</tr>
					<tr>
						<td class="tdleft">请输入密码</td>
						<td><input type="password" name="password" value="这是一个文本输入框"></input></td>
					</tr>
					<tr>
					    <td class="tdleft">请重复输入密码</td>
					    <td><input type="password" name="password" value="这是一个文本输入框"></input> 
					    </td>
					</tr>
					<tr>
						<td></td>
						<td class="hint">密码请为6-16位英文数字</td>
					</tr>
					<tr>
						<td class="tdleft">性别</td>
						<td>
							<input name="sex" id="male" type="radio" value="" checked="checked"></input>
							<label for="male">男</label>
							<input name="sex" id="female" type="radio" value=""></input>
							<label for="female">女</label>
						</td>
					</tr>
					<tr>
						<td class="tdleft">城市</td>
						<td>
							<select name="city">
								<option value="北京">北京</option>
								<option value="鞍山">鞍山</option>
								<option value="开封">开封</option>
							</select><br/>
						</td>
					</tr>
					<tr>
						<td class="tdleft">爱好</td>
						<td>
							<input type="checkbox" name="sports">运动</input>
							<input type="checkbox" name="art">艺术</input>
							<input type="checkbox" name="tech">科学</input>
						</td>
					</tr>
					<tr>
						<td class="tdleft" id="description">个人描述</td>
						<td>
						<textarea name="textarea" >这是一个多行输入框，输入您的个人描述</textarea>
						</td>
					</tr>
				</table>
				<div id="button">
					<input type="submit" value="确认提交" id="button"></input>
				</div>
				</div><!-- register -->
			</form>
		</div> <!-- fifth -->
		</div>	<!-- container1 -->
		

		<div class="footer">
			<span>版权所有&copy</span>
		</div> <!-- footer -->
	</div>  <!-- container -->

</body>
</html>